<template>
  <header class="header bd-bottom"
   id="header">
      <div class="posL">
          <slot name="posL"></slot>
      </div>
      <div class="posC">
          <slot name="posC"></slot>
          {{text}}
      </div>
      <div class="posR">
          <slot name="posR"></slot>
      </div>
  </header>
</template>
<script>
export default {
  props: ['text']
}
</script>
<style>
.header{
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    height: .44rem;
    padding: 0 .1rem;
    line-height: .44rem;
    background-color: #fff;
}
.header .posC{
    position: absolute;
    top: 0;
    bottom: 0;
    left: .7rem;
    right: .72rem;
}
.header .posL{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.header .posR{
    position: absolute;
    right: .1rem;
    top: 0;
    bottom: 0;
}
</style>
